<template>
  <div class="module-box">
    <div style="flex: 0 1 45%">
      <!-- 付费列表 -->
      <dv-border-box-8 style="width: 100%; height: 250px; position: relative">
        <PayList
          style="
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        />
      </dv-border-box-8>
    </div>
    <div style="flex: 0 1 30%">
      <!-- 饼状图 -->
      <dv-border-box-9 style="width: 100%; height: 250px">
        <dv-capsule-chart
          :config="config1"
          style="
            width: 70%;
            height: 160px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
          "
        />
        <PieChart />
      </dv-border-box-9>
    </div>
    <div style="flex: 0 1 25%">
      <!-- 小区动态 -->
      <dv-border-box-10 style="width: 100%; height: 250px">
        <span style="position: absolute; top: 10px; left: 20px; font-size: 14px"
          >进出车辆查询</span
        >

        <SearchCar />
      </dv-border-box-10>
    </div>
  </div>
</template>

<script setup>
import PieChart from "@/views/home/children/screen/components/PieChart";
import PayList from "@/views/home/children/screen/components/PayList";
import SearchCar from "@/views/home/children/screen/components/SearchCar";
import { ref } from "vue";

const input = ref("");
console.log(input, "input");
</script>

<style scoped lang="scss"></style>
